<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>插槽</h2>
    <father></father>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    const Son = {
      // template相当于是xxx.outerHtml
      // 所以默认情况下，标签调用的时候，里面写的东西是不显示的

      // 但是我们可以通过<slot></slot>标签，来显示
      // 也可以用插槽的方式做父传子


      // 插槽除了可以传数据，还可以传标签，甚至是组件
      // 所以如果需要父传子的内容是标签或者组件的时候，那么只能使用插槽
      // 如果传的是值，那么都能用。用的更多是自定义属性


      // 哪个组件的template就用那个组件的数据
      template: `
        <div>
          <div>这是子组件</div>
          <slot></slot>
        </div>
      `,
    }

    const Father = {
      data() {
        return {
          count: 123
        }
      },
      components: {
        Son
      },
      // template: `
      //   <div>
      //     <div>这是父组件</div>
      //     <son>{{ count }}</son>
      //   </div>
      // `,
      template: `
        <div>
          <div>这是父组件 - {{ count }}</div>
          <son>
            <span>{{ count }}</span>
            <span>456</span>
          </son>
        </div>
      `,
    }

    

    const app = createApp({
      components: {
        Father
      }
    });

    app.mount("#app");
  </script>
</body>
</html>